<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery.1.7.2.min.js"></script>
<script>
  // var $$ = $.noConflict();  
  //$(function() { $$('.flexslider').flexslider();  });
  $(function() {
  	$("#contractStatus1").multiselect({
	    header: true,
	    height: 200,
	    minWidth: 50,
	    checkAllText: '全选',
	    uncheckAllText: '全不选',
		selectedList: 3,//预设值最多显示10被选中项
	    hide: ["explode", 100],
	    noneSelectedText: '请选择',
	    close: function(){
	      var values= $("#contractStatus1").val() || "";
	      var value_str="";
	      $.each(values,function(num,value) {
	    	  value_str += "'"+value+"',";
	        });
	      $("#contractStatus").val(value_str.substring(0,value_str.lastIndexOf(",")));
		}
 	});
});
</script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
</head>
<body>
<select id="contractStatus1" multiple="multiple" style="width:250px">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input id="contractStatus" type="text" name="contractStatus">
</body>
</html>